<%@page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>flexigrid</title>
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/scripts/flexigrid/styles.css" />
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/scripts/flexigrid/css/flexigrid/flexigrid.css">
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery/jquery.min.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/flexigrid/flexigrid.pack.js"></script>
<style>
.flexigrid div.fbutton .add {
	  background: url("<%=request.getContextPath()%>/scripts/flexigrid/css/images/add.png" ) no-repeat center left;
}

.flexigrid div.fbutton .delete {
	  background: url("<%=request.getContextPath()%>/scripts/flexigrid/css/images/close.png" ) no-repeat center left;
}
</style>
</head>
<body>
<table id="x_grid" style="display: none"></table>
<script type="text/javascript">
	$("#x_grid").flexigrid( {
		url :'product_json.jsp',
		dataType :'json',
		colModel : [ {
			display :'ID',
			name :'productId',
			width :180,
			sortable :false,
			align :'left'
		}, {
			display :'产品名称',
			name :'productName',
			width :180,
			sortable :true,
			align :'left'
		}, {
			display :'生产日期',
			name :'productDate',
			width :120,
			sortable :true,
			align :'center'
		}, {
			display :'单价',
			name :'price',
			width :80,
			sortable :true,
			align :'right'
		}, {
			display :'数量',
			name :'quantity',
			width :80,
			sortable :true,
			align :'right'
		} ],
		buttons : [ {
			name :'新增',
			bclass :'add',
			onpress :test
		}, {
			name :'删除',
			bclass :'delete',
			onpress :test
		}, {
			separator :true
		} ],
		searchitems : [ {
			display :'产品名称',
			name :'productName'
		}, {
			display :'单价',
			name :'price',
			isdefault :true
		} ],
		usepager :true,
		title :'产品信息',
		useRp :true,
		rp :20,
		showTableToggleBtn :true,
		width :900,
		height :492
	});

	function test(com, grid) {
		if (com == '删除') {
			if (confirm('是否删除这 ' + $('.trSelected', grid).length + ' 条记录吗?')) {
				var id = "id=";
				for ( var i = 0; i < $('.trSelected', grid).length; i++) {
					id += $('.trSelected', grid).find("td:first").eq(i).text()
							+ ",";
				}
				window.location.href = "delete.jsp?" + id + "&date="
						+ new Date().getTime();
			}
		} else if (com == '新增') {
			window.location.href = "create_product.jsp?date="
					+ new Date().getTime();
		}
	}

	$('b.top').click( function() {
		$(this).parent().toggleClass('fh');
	});
</script>
</body>